<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Leon</title>
  <style>
    .app {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      text-align: center;
    }

    .header {
      display: flex;
      width: 450px;
      height: 100px;
      padding: 20px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 0 5px #e0e0e0;
    }

    .header .total {
      flex: 1;
      height: 30px;
      padding-left: 10px;
      border: 0;
      box-shadow: 0 0 5px #e0e0e0;
      outline: none;
    }

    .header .addbtn {
      width: 50px;
      height: 30px;
      text-align: center;
      border: 1px solid #e0e0e0;
      box-shadow: 0 0 3px #e0e0e0;
      cursor: pointer;
    }

    .app .uls {
      display: flex;
      flex-direction: column;
      width: 450px;
      height: 200px;
      padding: 20px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 0 3px #e0e0e0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    ul li {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 40px;
      margin: 3px 0;
    }

    ul li.active {
      opacity: .5;
    }

    li .clearbtn {
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 0 3px #e0e0e0;
      cursor: pointer;
    }

    li .text {
      flex: 1;
      height: 30px;
      border: 0;
      line-height: 30px;
      background-color: #fff;
    }

    li .checkbox1 {
      width: 25px;
      height: 25px;
      margin-right: 20px;
    }

    .clearboth {
      display: block;
      clear: both;
    }

    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 490px;
    }

    .delSelect {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="app">
    <h3>我的待办事项</h3>
    <div class="header">
      <input type="text" class="total" placeholder="I do ...">
      <button class="addbtn">添加</button>
    </div>
    <ul class="uls">
      <!-- <li>
        <input type="checkbox" class="checkbox1">
        <input class="text" value="learn css">
        <button class="clearbtn">X</button>
      </li> -->
    </ul>
    <div class="foot">
      <label for="selectAll">
        <input type="checkbox" id="selectAll">全选
      </label>
      <span><b class="num">0</b> 个未完成</span>
      <span class="delSelect">删除选中</span>
    </div>
  </div>

  <script src="../jquery/jquery.min.js"></script>
  <script>
    $(function () {
      // 添加TODO
      $('.addbtn').on('click', function () {
        if (!$('.total').val()) return alert('添加内容不能为空！');
        let data = getData();
        for (let i = 0; i < data.length; i++) {
          if (data[i]['content'] === $('.total').val()) return alert('数据内容不能重复');
        }
        data.push({
          content: $('.total').val(),
          done: false
        });
        saveData(data);
        load();
        // 添加完成后，清空输入框内容
        $('.total').val('');
      });

      // 回车键触发添加TODO事件
      $('.total').on('keyup', function (e) {
        if (e.keyCode === 13) $('.addbtn').triggerHandler('click');
      });

      load(); // 首屏加载

      // 根据本地存储的数据进行页面渲染
      function load() {
        let data = getData();
        $('.uls').empty(); // 遍历之前要先清空之前内容，再加载最新的数据
        $.each(data, function (i, v) {
          $('.uls').prepend(`
            <li class="${v.done?'active':''}">
              <input type="checkbox" class="checkbox1" ${v.done?'checked':''} id="${i}">
              <input class="text" value="${v.content}">
              <button class="clearbtn">X</button>
            </li>
         `);
        });
        notChecked(); // 更新未完成的个数
        checkAll(); // 更新全选按钮状态
      }

      // 监听checkbox1的change事件，记录最新的选中状态  -事件委托
      $('.uls').on('change', '.checkbox1', function () {
        let data = getData();
        let index = $(this).attr('id');
        data[index].done = $(this).prop('checked');
        saveData(data);
        load();
      });

      // 修改已添加的待办内容  -事件委托
      $('.uls').on('change', '.text', function () {
        let data = getData();
        let index = $(this).prev().attr('id');
        data[index].content = $(this).val();
        saveData(data);
        load();
      });

      // 删除单个数据  -事件委托
      $('.uls').on('click', '.clearbtn', function () {
        // $(this).parent().remove();
        // updateData($(this).siblings('.text').val());
        let data = getData(); // 先获取到最近的本地存储数据
        let newData = data.filter(item => item.content !== $(this).siblings('.text').val());
        saveData(newData);
        load();
      });

      // 全选、全不选功能
      $('#selectAll').on('click', function () {
        if ($(this).prop('checked')) {
          // $('.checkbox1').attr('checked', true);
          let data = getData();
          data.forEach(item => item.done = true);
          saveData(data);
          load();
        } else {
          // $('.checkbox1').attr('checked', false);
          let data = getData();
          data.forEach(item => item.done = false);
          saveData(data);
          load();
        }
      });

      // 检查全选框是否需要被选中
      function checkAll() {
        if (!$('.checkbox1').length) return $('#selectAll').prop('checked', false);
        if ($('.checkbox1:checked').length === $('.checkbox1').length) {
          $('#selectAll').prop('checked', true);
        } else {
          $('#selectAll').prop('checked', false);
        }
      }

      // 获取未被选中的个数
      // 未完成的个数 = 总的checkbox1复选框的个数 - 被选中的checkbox1复选框的个数
      // 1.单个checkbox1复选框选中状态发生变化时要调用
      // 2.全选框状态发生变化时要调用
      // 3.添加数据时要调用
      // 4.首屏加载要调用
      // 5.点击删除选中之后要调用
      // 6.点击删除单个数据时要调用
      function notChecked() {
        $('.foot .num').text($('.checkbox1').length - $('.checkbox1:checked').length);
      }

      // 删除选中
      $('.delSelect').on('click', function () {
        if (!$('.checkbox1').length) return alert('您还没有输入内容哦！快去添加吧');
        if (!$('.checkbox1:checked').length) return alert('您还没有已选中的内容哦！');
        // $('.checkbox1:checked').parent().remove();
        let data = getData();
        let newData = data.filter(item => item.done === false);
        saveData(newData);
        load();
      });

      // 保存本地存储数据
      function saveData(data) {
        localStorage.setItem('todoList', JSON.stringify(data));
      }

      // 获取本地存储数据
      function getData() {
        let data = localStorage.getItem('todoList');
        if (!data) return [];
        return JSON.parse(data);
      }
    });
  </script>
</body>

</html>